<template>
  <a-list
    rowKey="external_userid"
    :grid="{ xxl: 6, lg: 4, sm: 3 }"
    :dataSource="data"
    :loading="loading"
    :pagination="pagination"
  >
    <a-list-item slot="renderItem" slot-scope="item">
      <a-card hoverable style="width: 200px" v-if="type === 'all' || type === 'tag'">
        <a-card-meta :title="`${item.name}@${item.type}`">
          <a-avatar slot="avatar" :src="item.avatar" />
        </a-card-meta>
        <div style="height:100px; margin-top: 15px;" >
            <a-tag v-for="(itag,index) in item.corp_tags"  v-show="index < 5" :key="itag.tagid" style="margin-top: 5px;" >{{itag.tagname}}</a-tag>
            <a-popover v-if="item.corp_tags && item.corp_tags.length > 5 ">
                <template slot="content">
                <div style="width: 200px">
                    <a-tag style="margin-top: 5px" v-for="itag in item.corp_tags" :key="itag.tagid">{{
                    itag.tagname
                    }}</a-tag>
                </div>
                </template>
                <a-icon type="ellipsis" />
            </a-popover>
        </div>
      </a-card>
      <a-card hoverable style="width: 200px" v-else>
        <a-card-meta :title="`${item.name}@${item.type}`" >
          <a-avatar slot="avatar" :src="item.avatar" />
        </a-card-meta>
        <div style="margin-top: 15px;color: rgba(0,0,0,.45)">{{item.customer_simpinfo}}</div>
        <div style="height:100px; margin-top: 5px;" >
          <div :key="itag.keyid" style="display:block" v-for="(itag,index) in item.attrs" v-show="index < 5"  >{{itag.keyname}}：<a-tag style="margin-top: 5px">{{itag.keyvalue}}</a-tag></div>
          <a-popover v-if="item.attrs && item.attrs.length > 5 ">
                <template slot="content">
                  <div :key="itag.keyid" style="display:block" v-for="itag in item.attrs" >{{itag.keyname}}：<a-tag style="margin-top: 5px">{{itag.keyvalue}}</a-tag></div>
                </template>
                <a-icon type="ellipsis" />
            </a-popover>
        </div>
      </a-card>
    </a-list-item>
  </a-list>
</template>
<script>
export default {
  props: {
    data: { // 客户数据
      type: Array,
      default: function () {
        return []
      },
    },
    type: { // 查询条件类型
      type: String,
      default: 'biz',
    }
  },
  data() {
    return {
      loading: true,
      pagination: {
        showTotal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      }
    }
  },
  watch: {
    data: {
      handler(val, oval) {
        this.loading = false
      },
      immediate: true,
      deep: true,
    },
  }
}
</script>